<template>
	<!-- 未发货 -->
	<view class="unreceived">
		<!-- 有数据 -->
		<view class="ddd" v-show="unreclist.length">
			<view class="orderinfo" v-for="(item, index) in unreclist">
				<view
					class="orderlists"
					v-for="(items, indexs) in item.orderInfoList"
				>
					<view class="oredetime">
						<view class="goodstop">
							<u-icon name="home" size="24px"></u-icon>
							<text>{{ item.createTime }}</text>
						</view>
						<view class="timestitle">未发货</view>
					</view>

					<view class="goodsinfo">
						<view class="image">
							<u--image
								:src="items.image"
								width="80px"
								height="80px"
							></u--image>
						</view>

						<view class="goodsname">{{ items.storeName }}</view>
						<view class="goodsprice">
							<view>￥{{ items.price }}</view>
							<text>x{{ items.cartNum }}</text>
						</view>
					</view>

					<view class="total">
						<view class="totalprice">
							共{{ items.cartNum }}件商品， 总金额：
							<text>¥{{ items.price * items.cartNum }}</text>
						</view>
					</view>
					<view class="paymentsclick">
						<button
							class="paymentsbtn2"
							@click="getsubmit(item.orderId)"
						>
							查看详情
						</button>
					</view>
				</view>
			</view>
			<view style="text-align: center; margin-top: 30px;">
				我也是有底线的
			</view>
		</view>
		<view class="orderListInfo" v-show="!unreclist.length">
			<!-- 暂无订单 -->
			<u--image
				width="100vw"
				height="400px"
				src="https://img.ixintu.com/download/jpg/20210408/bff28269f495ba2cdf07375741baf926_800_800.jpg!con"
			></u--image>
			<view class="error">暂无订单.......</view>
		</view>
	</view>
</template>

<script>
import {getUnreceived} from "../../network/order.js";
export default {
	data() {
		return {
			unreclist: []
		};
	},
	methods: {
		getsubmit(orderId) {
			console.log("111112222", orderId);
			uni.navigateTo({
				url: `/pages/orderinfo/unrece?orderId=${orderId}`
			});
		}
	},
	async created() {
		let res = await getUnreceived();
		console.log("待sss发货", res.data.list);
		this.unreclist = res.data.list;
		console.log("待发cc货", this.unreclist);
	}
};
</script>

<style lang="scss">
.orderlists {
	margin-top: 20px;
	background-color: white;
	padding: 10px;
	.oredetime {
		display: flex;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-bottom: 1px solid #ccc;
		.times {
			flex: 1;
			text-align: left;
			font-family: 16px;
		}
		.timestitle {
			text-align: right;
			flex: 1;
			font-family: 16px;
			color: red;
		}
		.goodstop {
			display: flex;
		}
	}
	.goodsinfo {
		display: flex;
		text-align: center;
		padding: 20px;
		.image {
			flex: 1;
		}
		.goodsname {
			flex: 3;
			font-size: 12px;
			padding: 0px 3px;
			text-align: left;
		}
		.goodsprice {
			flex: 1;
			font-size: 14px;
			color: #dedede;
		}
	}
	.totalprice {
		padding: 20px 0px;
		text-align: right;
		text {
			color: red;
		}
	}
	.paymentsclick {
		display: flex;

		.paymentsbtn2 {
			background-color: red;
			border-radius: 25px;
			line-height: 30px;
			font-size: 14px;
			height: 30px;
			color: white;
			text-align: center;
			margin-left: 220px;
		}
	}
}
</style>
